import React from 'react';
import {
  Tabs,
  Select,
  Card,
  Form,
  Input,
  Button,
  Col,
  Row,
  Cascader,
  List,
} from 'antd';
import avatar from '../../assets/logo.svg';

const { TabPane } = Tabs;
const { Option } = Select;
const { TextArea } = Input;
class center extends React.Component {
  state = {
    tabPosition: 'left',
    optionsData: [
      {
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [
          {
            value: 'hangzhou',
            label: 'Hangzhou',
            children: [
              {
                value: 'xihu',
                label: 'West Lake',
              },
            ],
          },
        ],
      },
      {
        value: 'jiangsu',
        label: 'Jiangsu',
        children: [
          {
            value: 'nanjing',
            label: 'Nanjing',
            children: [
              {
                value: 'zhonghuamen',
                label: 'Zhong Hua Men',
              },
            ],
          },
        ],
      },
    ],
    listData: [
      {
        title: '账户密码',
        content: '当前密码强度：强',
        action: '修改',
      },
      {
        title: '密保手机',
        content: '已绑定手机:138****8293',
        action: '修改',
      },
      {
        title: '密保问题',
        content: '未设置密保问题，密保问题可有效保护账户安全',
        action: '设置',
      },
      {
        title: '备注邮箱',
        content: '已绑定邮箱:ant***sign.com',
        action: '修改',
      },
      {
        title: 'MFA 设备',
        content: '未绑定 MFA 设备,绑定后，可以进行二次确认',
        action: '绑定',
      },
    ],
  };

  render() {
    return (
      <div style={{ paddingTop: 10 }}>
        <Card>
          <Tabs
            tabPosition={this.state.tabPosition}
            tabBarStyle={{ width: 200 }}
          >
            <TabPane tab="基本设置" key="1">
              <Row>
                <Col span={8}>
                  <h1 style={{ fontSize: '20px' }}> 基本设置</h1>
                  <Form layout="vertical">
                    <Form.Item label="邮箱" required>
                      <Input placeholder="" />
                    </Form.Item>
                    <Form.Item label="昵称" required>
                      <Input placeholder="" />
                    </Form.Item>
                    <Form.Item label="个人简介" required>
                      <TextArea />
                    </Form.Item>
                    <Form.Item label="国家/地区" required>
                      <Select defaultValue="中国" style={{ width: '60%' }}>
                        <Option value="中国">中国</Option>
                      </Select>
                    </Form.Item>
                    <Form.Item label="所在省市" required>
                      <Cascader options={this.state.optionsData} />
                    </Form.Item>
                    <Form.Item label="街道地址" required>
                      <Input placeholder="" />
                    </Form.Item>
                    <Form.Item label="联系电话" required>
                      <Input placeholder="" />
                    </Form.Item>
                    <Form.Item>
                      <Button type="primary">更新基本信息</Button>
                    </Form.Item>
                  </Form>
                </Col>
                <Col style={{ marginLeft: 100, paddingTop: 45 }}>
                  <h1>头像</h1>
                  <img src={avatar} style={{ height: 150 }} />
                  <div style={{ marginTop: 20, marginLeft: 20 }}>
                    {' '}
                    <Button>+更换头像</Button>
                  </div>
                </Col>
              </Row>
            </TabPane>
            <TabPane tab="安全设置" key="2" style={{ paddingRight: 20 }}>
              <h1 style={{ fontSize: '20px' }}> 安全设置</h1>
              <List
                dataSource={this.state.listData}
                renderItem={(item) => (
                  <List.Item actions={[<a>{item.action}</a>]}>
                    <List.Item.Meta
                      title={item.title}
                      description={item.content}
                    ></List.Item.Meta>
                  </List.Item>
                )}
              />
            </TabPane>
          </Tabs>
        </Card>
      </div>
    );
  }
}
export default center;
